Claude Code 设计专业HTML页面, 不用写一行代码

## 1. 介绍 本视频讲述了如何使用Claude Code，在不写一行代码的前提下，以非专业人士的视角，设计专业的HTML 页面的过程。 申明: 随DP_IT视频发布，免费使用，禁止任何转售等商业行为，如果有人卖给你这个，请去退款。网址: https://dpit.lib00.com ## 2. 视频中使用到资源 > 用到的各种资料库下载地址: 夸克网盘: https://pan.quark.cn/s/f4f50793599e 迅雷云盘: https://pan.xunlei.com/s/VOZKjrfVtyq61ruBxjtvVXacA1?pwd=hdqi UC网盘: https://drive.uc.cn/s/c80f9eadd69b4 Google drive: https://drive.google.com/drive/folders/1XNeqyB2HMylWUccbxRjCqr4yq4PJpt2H > github: https://github.com/016/claude_code_101_html_design ## 3. 视频中使用到命令 ### 1. 视频列表页(f-video-list) 线框图 > //1. 生成视频列表页线框图 > //1.1 无明确需求生产模式 /dp:UI:wireframe generate f-video-list > //1.2 指定明确需求生成模式 /dp:UI:wireframe generate f-video-list " -布局上需要包括顶部导航、中部内容展示区域和底部页脚 -顶部导航 -logo区域 -3个网站页面的链接 -用户注册登录的按钮 -深色浅色主题切换的按钮 -i18n切换按钮 -底部页脚包含: -显示常规的多组站内页面快速链接。 -快速邮件订阅的区域 -社交媒体的链接(主要为: youtube, bilibili, 抖音, QQ, 微信, 其中微信鼠标悬停为一张二维码图片) -版权信息部分 -中部内容展示区包含: -视频筛选区域 -视频标签多选Dropdown筛选 -视频合集多选Dropdown筛选 -视频关键词搜索框 -搜索结果汇总展示 -视频展示列表 -使用 card 展示包括: (thumbnail, title, release date, author name, primary tag, collection tag, short description) -分页元素 -右下角悬浮显示回到顶端按钮和联系我们按钮 -及其他应该出现在此类页面上的元素 " ### 2. 视频列表页(f-video-list) HTML > //2.1 首次新建 /dp:UI:html create f-video-list " -使用已完成的线框图。@frontend-designs/wireframes/f-video-list_2.md -按相关文档中的要求生成html " > //2.2 修改1 /dp:UI:html update f-video-list " -基于已完成的 html 和相关文件。@frontend-designs/html/f-video-list_2.html -topbar -取消固定顶端，改为随页面滚动。 -浅色主题使用白色背景topbar -右侧按钮顺序调整，改为切换语言，切换样式，登录 注册。 -切换样式需要有下拉菜单。中间包括深色、浅色和自动。 -视频筛选部分 -取消 JS 的筛选。将使用 PHP 服务器端的筛选直接做成 form 提交即可。 -标签和合集筛选改为多选。使用https://github.com/choices-js/choices，这里可以使用 context7 MCP -删除关键词搜索按钮，使用 boot strap input group 添加一个搜索按钮，使用回车激活form提交。这里可以使用 context7 MCP -删除搜索结果中关于当前筛选部分的描述。该部分内容改为在对应的下拉菜单和输入框中显示。 -位置调整。标签和合集占用一行，各占用50%，区域搜索和搜索结果占用一行各占用50%区域。 -视频展示区域 -取消 JS 分页，将使用 PHP 服务端分页直接做成 URL get 属性即可。 -视频 card -视频发布时间和视频作者改为一行，放在标题下方，增加 icon，字体变小。 -视频简介，放在视频作者下一行，适当增加文字内容。 -视频标签和合集标签移动到 card footer的位置。左侧放标签，右侧放合集。 -分页部分样式不够好看，重新设计，要求简约，符合当前风格。 -页脚 -快速链接删除学习资源和帮助中心两列，空余空间把订阅邮件和社交媒体移动上来。快速链接在左边，订阅邮件+社交媒体在右边。 " > //2.3 修改2 /dp:UI:html update f-video-list " -基于已完成的 html 和相关文件。@frontend-designs/html/f-video-list_3.html -样式相关 -统一修改全局 CSS 样式，把选中激活状态的紫色改成蓝色 -深色模式下topbar和footer颜色和背景过于相近，修改深色模式的颜色，让各个区域颜色融洽 -choices-js/choices 插件bug -以下问题同时存在于标签筛选和合集筛选。 -可以查询 context7 MCP -标签筛选的下拉菜单被下方视频列表遮挡，深色、浅色主题下均存在该问题。 -标签筛选选中项的右上角有一个删除按钮，这个按钮出现了向上偏移，没有居中。 -标签筛选下拉菜单里的颜色出现异常，当前未显未选中状态显示为紫色，选中状态显示为白色，修改为未选中状态显示为白色，选中状态显示为当前页面统一选中定义的颜色。 -标签筛选输入框中的"请选择标签.."文字在深色模式下太过突兀, 尝试修复颜色,使得更融合。 -视频筛选部分 -删除区域搜索。把右侧的关键词搜索移动过来。把搜索结果放在右侧，占用同一行 -视频 card -顶部改为视频封面图片，而非视频播放链接 -发布时间和视频标题中间的间距过大，适当调小。 -card footer按钮当前样式太小气了！重做样式，调整方向为改为方形。颜色也要改变的更高级 -页脚 -左侧的快速链接增加一列。右侧的邮件订阅区缩小50%，空出来的区域存放新增的快速链接列。 -页脚所有链接样式重做当前样式。太过普通，需要高级感 " > //2.4 修改3 /dp:UI:html update f-video-list " -基于已完成的 html 和相关文件。@frontend-designs/html/f-video-list_4.html -topbar -navbar-brand 和 navbar-nav 内部文字颜色需要调整。在浅色模式下还可以，在深色模式下颜色不够突出。进行调整使得深浅色模式下对应文字都比较清晰可见且和颜色融合。 -i18n切换，点击后显示的dropdown-menu弹窗被下方的 视频筛选 card 遮挡。进行调整使弹窗处于筛选card上方。 深浅色主题切换也有相同问题一并修复。 -choices-js/choices -视频标签和视频合集多选框，使用这个插件以后的颜色方案我不是很满意。请尝试用该插件默认颜色兼容当前申请色主题进行修改。 -视频筛选部分 -关键词搜索修改为占半行(col-md-6)，后面的搜索结果也占半行。 -视频 card -顶部封面图片鼠标悬浮时不应该有播放按钮，只显示封面图片，并且唯可点击链接即可. 封面图片页面显示分辨率修改为304×171。 -底部 card-footer 修改合适背景颜色，使之和 video-info 相区分. 结构上 card-footer 应该和 video-info 同级，把它从video-info中移出来。 " > //2.5 修改4 /dp:UI:html update f-video-list " -基于已完成的 html 和相关文件。@frontend-designs/html/f-video-list_5.html -topbar -i18n切换按钮，点击后显示的dropdown-menu弹窗被下方的 视频筛选区域 card 挡住了部分内容。进行调整使弹窗处于筛选card上方。 深浅色主题切换弹窗也有相同问题一并修复。 -视频标签和视频合集多选框 -当前使用的是choices-js/choices，删除这个插件(包括 全部JS和CSS)，效果不好。完全删除。 -使用原生JS完成相同功能，主要功能如下 -默认显示一个输入框内容为，请选择标签。 -点击后出现多选下拉菜单。下拉菜单里的选项包括checkbox和文本。 -可以通过点击checkbox 或者文本实现选中和取消选中状态 -选中后在上方的 input 里显示选中的文本内容和选中的数量。 -兼容现有的 form 提交模式 -兼容现有深色浅色主题。 -视频 card -底部 card-footer 区域的 button。把字体变细，字体变大一点，现在太粗了，字太小了，看不清楚。 " > //2.6 修改5 /dp:UI:html update f-video-list " -基于已完成的 html 和相关文件。@frontend-designs/html/f-video-list_6.html -浅色模式下，body 背景颜色修改为 #e8e8e8 -视频筛选区域 -移除三个 label 内容，分别为。标签筛选、合集筛选、关键词搜索。 -视频标签和视频合集多选框 -下拉菜单只能通过操作每一项的checkbox进行选中和反选。点击对应的文字，无法实现相同操作。请修改为点击文字也可以实现相同操作 -选中内容，在输入框里显示的button selected-item 布局异常，因为使用了 Flex 属性，所以会自动分布修改为靠左对齐。 -关于选中后显示的 button。最多显示5个其余的省略。在最后一个 button 后显示数字代表当前选中的总数。当选中button数大于0时显示总数。 -footer -footer背景色和5个 H5 title 颜色冲突，请修改footer背景色，为一个更合适的颜色，充分考虑浅色和深色主题。 " > //2.7 修改6 /dp:UI:html update f-video-list " -基于已完成的 html 和相关文件。@frontend-designs/html/f-video-list_7.html -视频标签和视频合集多选框 -下拉菜单只能通过操作每一项的checkbox进行选中和反选。点击文字和对应项的空白区域无法实现选中，我想要的是点击 dropdown-option 的任何位置都能实现选中和取消选中。 -选中内容和count，当前在输入框内水平靠右了，请修复为水平靠左。 -footer -微信按钮，鼠标悬停/点击时展示一张二维码图片。 " > //2.8 修改7 /dp:UI:html update f-video-list " -基于已完成的 html 和相关文件。@frontend-designs/html/f-video-list_8.html -topbar -登录和注册按钮太大了，改成和切换主题一样大 -视频标签和视频合集多选框 -选中JS行为存在一个bug，当发生选中时，会增加2个 "selected-items", 其中一个为空tag, 另外一个为展示用途tag，当取消选中时，展示用途tag会变成空 tag，两个都会作为空 tag 存在，不会删除。下次发生选中行为时，又会额外增加两个 tag，正确的逻辑应该是始终只存在一个selected-items。 " > //2.9 修改8 /dp:UI:html update f-video-list " -基于已完成的 html 和相关文件。@frontend-designs/html/f-video-list_9.html - JS -按要求把公共JS代码抽离出来，新建main.js保存。包括所有涉及多页面可以共享的 JS 代码。 -视频 card 中 -视频 video-card 使用 bootstrap card组件 重写，保持现有样式不变。 -card-footer 里的 3个标签用 bootstrap btn 重写，要求使用 btn btn-outline-* btn-sm。注意在颜色上和深浅色主题融合 " > //2.10 修改9 /dp:UI:html update f-video-list " -topbar -登录和注册 btn增加宽度, 使得更美观 -基于已完成的 html 和相关文件。@frontend-designs/html/f-video-list_10.html -标签和合集筛选的 dropdown 弹窗, 弹出后被下方的 video card 遮挡。把 dropdown 弹窗放在 video card 上方取消遮挡。 -视频 card 中 -card-footer 里的 3个button 保留现有样式。改为 a 标签实现可 URL 跳转，快速搜索 button对应标签或合集。 " ### 3. 视频详情页(f-video-detail)线框图 > //3.1. 生成视频详情页线框图 /dp:UI:wireframe create f-video-detail " > 1. 宏观上包括topbar，footer，视频详情展示区域，辅助模块 2. 视频详情展示包括 -视频嵌入/外链播放器 -标题、发布信息、时长、标签、所属合集 -视频正文/资源块（富文本 HTML/MD） -站内统计（站内浏览数，平台原始统计可显示） -点赞、收藏（登录用户） -评论区 -分享按钮 -在该展示模块最下方设置一个关联视频推荐模块 3. 辅助模块包括: -最新公告列表 -关联视频 4. 我需要你做2个迭代供我选择，进行两次独立的设计，存放在两个不同的文件内 " ### 4. 视频详情页(f-video-detail) HTML > //4.1 常规生成2次 /dp:UI:html create f-video-detail " -使用已完成的线框图。@frontend-designs/wireframes/f-video-detail_2_1.md -从已完成的 视频列表页 html 和相关文件复制样式。@frontend-designs/html/f-video-list_10.html -要求完整拷贝 topbar, footer。背景主题、颜色和所有公共元素样式和js代码。保持全站统一 -按相关文档中的要求生成html -做2个迭代供我选择 -额外要求 -为文字增加必要的icon - button 使用 btn btn-outline-* btn-sm -尽量做的简洁，精致 -视频详情页将使用markdown 字符串，直接放入<div>标签中 " > //4.2 额外生成尝试2次 /dp:UI:html create f-video-detail " -使用已完成的线框图。@frontend-designs/wireframes/f-video-detail_2_1.md -做2个迭代供我选择 "

# Claude Code 设计专业HTML页面, 不用写一行代码 ## 视频概述 本视频详细演示了如何使用 Claude Code AI 工具，在不编写任何代码的情况下，通过自然语言交互完成专业级 HTML 页面设计。作者 DP 以其个人视频发布网站 DPIT 的改版为实例，展示了从线框图设计到完整页面实现的全过程。 --- ## 核心内容 ### 1. 项目准备与结构 视频首先介绍了项目的基础结构： - **Claude.MD**：Claude 的主配置文件，相当于 AI 的"大脑" - **PRD 文档**：产品需求文档，定义项目规则和需求 - **前端设计稿目录**：包含线框图(wireframe)、HTML、CSS、JS 四个子文件夹 - **角色定义**：在 rules 文件夹中定义了前端工程师角色和页面标识符 ### 2. 设计工作流程 **第一阶段：线框图生成** - 使用简单的命令格式：`wireframe generate [页面标识] [需求描述]` - 演示了两种模式：无明确要求生成和有明确要求生成 - Claude 会根据 PRD 文档自动生成结构化的线框图 - 线框图包括顶部导航、筛选区域、视频列表、分页和页脚等元素 **第二阶段：HTML 页面实现** - 基于生成的线框图，通过自然语言指令生成 HTML 页面 - 首次生成即可实现基本布局和功能要求 - 包含响应式设计、日夜主题切换、悬浮按钮等高级功能 ### 3. 迭代优化过程 视频详细记录了 10 次迭代优化过程： **第 1-2 次修改**： - 将固定导航改为随页面滚动 - 调整背景颜色和按钮顺序 - 添加主题切换下拉菜单 - 费用：约 2.86 美元 **第 3-5 次修改**： - 优化颜色方案，去除紫色主题 - 修复 i18n 插件遮挡问题 - 调整视频卡片封面图片比例 - 改进深色模式显示效果 **第 6-8 次修改**： - 用原生 JavaScript 替代第三方插件 - 优化多选框交互逻辑 - 调整背景颜色对比度 - 添加微信二维码展示功能 **第 9-10 次修改**： - 抽离 JavaScript 代码实现模块化 - 统一视觉风格，改用方形标签和直角设计 - 细节优化，提升整体和谐度 ### 4. 视频详情页开发 在完成列表页后，作者展示了详情页的快速开发： - 生成详情页线框图 - 演示了如何直接编辑线框图文本进行快速调整 - 基于已有的设计风格，生成了 4 个不同版本的详情页 - 选择最契合整体风格的版本进行后续开发 --- ## 技术亮点 1. **零代码开发**：全程使用自然语言与 AI 交互 2. **快速迭代**：每次修改需求清晰，修改量递减 3. **成本控制**：使用 Claude Sonnet 4 模型，通过 API 调用，成本透明 4. **可视化设计**：线框图让非技术人员也能理解和参与设计 5. **模块化思维**：将 JS、CSS 分离，符合工程化标准 --- ## 实用建议 ### 对于初学者： - 准备好 PRD 文档和数据库结构（可借助 ChatGPT 生成） - 使用清晰的文件命名规范，便于版本管理 - 善用 `clear` 命令管理上下文长度 - 遇到问题时让 AI "再仔细想想" ### 关于模型选择： - **推荐**：Claude Sonnet 4（效果最佳） - **替代**：DeepSeek v3.1、GLM（可能需要更多迭代） - 国产模型虽然可用，但可能需要更多调试步骤 ### 迭代策略： - AI 是"不知疲倦的工具"，可以无限次重做 - 同一需求可以生成多个版本进行对比选择 - 使用版本号管理不同迭代结果 - 小修改直接在线框图文本上编辑更高效 --- ## 项目成果 最终实现了： - ✅ 现代化的视频列表页面，包含筛选、搜索、分页功能 - ✅ 响应式设计，支持日夜主题切换 - ✅ 多语言切换（i18n）支持 - ✅ 原生 JavaScript 实现，无冗余依赖 - ✅ 视频详情页的多个设计方案 - ✅ 统一的视觉风格和用户体验 --- ## SEO 关键词 Claude Code, AI 编程, 零代码开发, 网页设计, HTML 自动生成, 前端开发, 人工智能辅助编程, 线框图设计, 自然语言编程, Claude Sonnet 4, 快速原型开发, DeepSeek AI, 网站设计工具